$(function() {

	var AlertView = Backbone.View.extend({
		el : $('#alert-container'),
		template : _.template($('#alert-template').html()),
		render : function() {
			$(this.el).html(this.template({
				model : this.model
			}));
			return this;
		}
	});

	var GameView = Backbone.View.extend({
		el : $('#game-container'),
		template : _.template($('#game-template').html()),
		render : function() {
			$(this.el).html(this.template(this.model));
			return this;
		}
	});

	var UserProposalModalView = Backbone.View.extend({
		el : $('#modal-container'),
		events : {
			'click button[data-confirm=confirm]' : 'confirm',
		},
		render : function() {
			var template = _.template($(
					'#modal-' + this.model.type + '-template').html());
			var that = this;
			game.api(function(data) {
				$(that.el).html(template(data));
				$('> div', that.el).modal();
			}, 'userProposal/', {
				id : this.model.id,
				type : this.model.type
			});

			return this;
		},
		confirm : function(e) {
			// отправляем
			var serialized = $('#user-proposal-form').serializeArray();
			var params = {};
			for (var key in serialized) {
				params[serialized[key]['name']] = serialized[key]['value'];
			}
			game.api(function(data) {
			}, 'userProposal/create', {
				id : this.model.id,
				type: this.model.type,
				params: params,
			});
			// закрываем не дожидаясь чего там случится
			$('> div', this.el).modal('hide');
			if (typeof this.model.afterConfirm == 'function') {
				this.model.afterConfirm();
			}
		}
	});

	var QuestionView = Backbone.View.extend({
		el : $('#game-container'),
		events : {
			'click button[type=submit]' : 'submit',
			'click #user-edit-button' : 'userEdit',
			'click #user-delete-button' : 'userDelete',
		},
		template : _.template($('#question-template').html()),
		render : function() {
			$(this.el).html(this.template(this.model));
			return this;
		},
		submit : function(e) {
			// тушим кнопки
			$('button', this.$el).attr('disabled', 'disabled').removeClass(
					'btn-primary').addClass('btn-default');
			// подсвечиваем нажатую
			$(e.target).removeClass('btn-default').addClass('btn-primary');
			game.answer($('#answer-id', this.$el).val(), $(e.target).val());

			return false;
		},
		userEdit : function(e) {
			// вариант пользователя
			modalView = new UserProposalModalView({
				model : {
					type : 'fact-edit',
					id : $('#answer-id', this.$el).val(),
				}
			});
			modalView.render();
		},
		userDelete : function(e) {
			// предложение удалить
			var that = this;
			modalView = new UserProposalModalView({
				model : {
					type : 'fact-delete',
					id : $('#answer-id', this.$el).val(),
					afterConfirm : function() {
						// клацаем кнопку
						$('button[value=unknow]', that.$el).click();
					},
				}
			});
			modalView.render();
		}
	});

	var GuessView = Backbone.View.extend({
		el : $('#game-container'),
		events : {
			'click button[type=submit]' : 'submit',
		},
		template : _.template($('#guess-template').html()),
		render : function() {
			$(this.el).html(this.template(this.model));
			return this;
		},
		submit : function(e) {
			// тушим кнопки
			$('button', this.$el).attr('disabled', 'disabled').removeClass(
					'btn-primary').addClass('btn-default');
			// подсвечиваем нажатую
			$(e.target).removeClass('btn-default').addClass('btn-primary');
			game.guess($(e.target).val());

			return false;
		}
	});

	var LossView = Backbone.View.extend({
		el : $('#game-container'),
		template : _.template($('#loss-template').html()),
		render : function() {
			$(this.el).html(this.template(this.model));
			return this;
		}
	});

	var ImaginedView = Backbone.View.extend({
		el : $('#game-container'),
		events : {
			'click button[type=submit]' : 'submit',
		},
		template : _.template($('#imagined-template').html()),
		render : function() {
			$(this.el).html(this.template(this.model));
			$('#imaginedTitle', this.el).typeahead({
				source : function(query) {
					// синхронный запрос
					return $.ajax({
						type : 'GET',
						data : {
							'query' : query
						},
						url : '/api/typeahead/conclusion',
						async : false,
						dataType : 'json',

					}).responseJSON;
				}
			});
			return this;
		},
		submit : function(e) {
			// тушим кнопки
			$('input', this.$el).attr('disabled', 'disabled');
			// подсвечиваем нажатую
			$(e.target).removeClass('btn-default').attr('disabled', 'disabled')
					.addClass('btn-primary');
			game.imagined($('#imaginedTitle', this.$el).val());
			return false;
		}
	});

	var FactView = Backbone.View.extend({
		el : $('#game-container'),
		events : {
			'click button[type=submit]' : 'submit',
		},
		template : _.template($('#fact-template').html()),
		render : function() {
			$(this.el).html(this.template(this.model));
			$('#factTitle', this.el).typeahead({
				source : function(query) {
					// синхронный запрос
					return $.ajax({
						type : 'GET',
						data : {
							'query' : query
						},
						url : '/api/typeahead/fact',
						async : false,
						dataType : 'json',

					}).responseJSON;
				}
			});
			return this;
		},
		submit : function(e) {
			// тушим кнопки
			$('input', this.$el).attr('disabled', 'disabled');
			// подсвечиваем нажатую
			$(e.target).removeClass('btn-default').attr('disabled', 'disabled')
					.addClass('btn-primary');
			game.fact($('#factTitle', this.$el).val());
			return false;
		}
	});

	var WinView = Backbone.View.extend({
		el : $('#game-container'),
		template : _.template($('#win-template').html()),
		render : function() {
			$(this.el).html(this.template(this.model));
			return this;
		}
	});

	// определяем действия игры
	var Game = Backbone.Router.extend({

		state : null,

		gameView : null,

		moderateView : null,
		
		routes : {
			'' : 'game',
			'begin' : 'begin',
		},

		// текущее состояние игры
		game : function() {
			var that = this;
			this.api(function(data) {
				if (data) {

					if (that.gameView) {
						that.gameView.undelegateEvents();
					}
					// в зависимости от состояния игры отрисовывем
					// правильную вьюху, скрывая все остальные
					switch (data.state) {

					case null:
						if (that.state != data.state) {
							that.gameView = new IntroView({});
						}
						break;

					case 1:
						that.gameView = new QuestionView({
							model : data
						});
						break;

					case 3:
						that.gameView = new GuessView({
							model : data
						});
						break;

					case 5:
						that.gameView = new LossView({
							model : data
						});
						that.moderateView = new ModerateView({});
						break;

					case 6:
						that.gameView = new ImaginedView({
							model : data
						});
						break;

					case 8:
						that.gameView = new FactView({
							model : data
						});
						break;

					case 10:
						that.gameView = new WinView({
							model : data
						});
						that.moderateView = new ModerateView({});						
						break;

					default:
						that.gameView = new GameView({
							model : data
						});
						break;
					}
					that.state = data.state;
					// console.log(data);

					that.gameView.render();
				}
			}, '', {});
		},

		// начинаем новую игру
		begin : function() {
			var that = this;
			this.api(function(data) {
				that.navigate('', {
					trigger : true
				});
			}, 'begin', {});
		},

		// ответ на вопрос
		answer : function(id, value) {
			var that = this;
			this.api(function(data) {
				that.game();
			}, 'answer', {
				id : id,
				answer : value
			});
		},

		// ответ на догадку
		guess : function(value) {
			var that = this;
			this.api(function(data) {
				that.game();
			}, 'guess', {
				answer : value
			});
		},

		// ответ на догадку
		imagined : function(value) {
			var that = this;
			this.api(function(data) {
				that.game();
			}, 'imagined', {
				conclusion : value,
			});
		},

		// отливающий факт
		fact : function(value) {
			var that = this;
			this.api(function(data) {
				that.game();
			}, 'fact', {
				fact : value,
			});
		},

		api : function(callback, type, params) {
			var that = this;
			$.getJSON("/api/" + type, params, function(data) {
				callback(data);
			}).fail(function(jqxhr, textStatus, error) {
				that.alert(jqxhr.responseJSON);
			});
		},

		alert : function(message) {
			var alert = new AlertView({
				model : message
			});
			alert.render();
		}

	});

	// запускаем
	window.game = new Game;
	Backbone.history.start({
	// pushState : true
	});
});